import 'package:flutter/material.dart';
import '../widget/my_swiper.dart';
import '../widget/my_number.dart';
import '../widget/my_tab.dart';
import '../pages/payment.dart';
import '../layout_app.dart';

//轮播图子项对象
class SwiperPic {
  String title;
  String url;
  String path;
  SwiperPic(this.title, this.url, this.path);
}

//先不考虑传参情况，因为点击项目跳转都没设置id,正式开发再传
class ProductDetail extends StatefulWidget {
  const ProductDetail({Key? key}) : super(key: key);

  @override
  _ProductDetailState createState() => _ProductDetailState();
}

class _ProductDetailState extends State<ProductDetail> {
  List<SwiperPic> list = [
    SwiperPic('图一','https://www.baidu.com','assets/images/slide11.png'),
    SwiperPic('图二','https://www.baidu.com','assets/images/slide12.png'),
  ];
  // 购买数量
  late int number;

  List tabsInfo = [
    {'name': '图文详情', 'desc': 'assets/images/content.png'},
    {'name': '详细参数', 'desc': 'assets/images/canshu.png'},
  ];

  // 当前tabs索引
  late int _currentIndex;

  // 当前商品信息，暂且写死
  final Map goodInfo = {
    'name': 'X9Plus 全网通',
    'price': 2798,
    'img': 'assets/images/good.png'
  };

  @override
  void initState() {
    number = 1;
    _currentIndex = 0;
    super.initState();
  }

  void _numberChange(num){
    setState(() {
      number = num;
    });
  }

  void _openModalBottomSheet(){
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          height: 200.0,
          padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
          child: const Center(
            child: Text('分期有风险，换新防二手(●'+'◡'+'●)', style: TextStyle(fontSize: 26.0),),
          ),
        );
      }
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Transform(
          transform: Matrix4.translationValues(-24, 0.0, 0.0),
          child: const Text('商品详情',style: TextStyle(color: Colors.black,fontSize: 16.0)),
        ),
        toolbarHeight: 50.0,
        backgroundColor: Colors.white,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios_new_sharp, color: Colors.black, size: 16,),
          onPressed: () => Navigator.of(context).pop(),
        ),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.fromLTRB(16, 12, 16, 0),
        scrollDirection: Axis.vertical,
        primary: true,
        physics: const ScrollPhysics(),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              width: MediaQuery.of(context).size.width,
              height: 300,
              child: MySwiper(swiperList: list, defalutStyle: true,),
            ),
            const Padding(
              padding: EdgeInsets.fromLTRB(0, 14.5, 0, 14.5),
              child: Text('X9Plus 全网通', style: TextStyle(fontSize: 19.0, fontWeight: FontWeight.bold),),
            ),
            const Text(
              '[花呗免息，0首付0利率轻松购机] X9s Plus A 5.85英寸大屏,双引擎闪充, 4015mAh大电池，持久续航(注:面部识别需升级到最新系统使用)',
              style: TextStyle(fontSize: 14.0, color: Color(0xff1d1d1d)),
            ),
            const Padding(
              padding: EdgeInsets.fromLTRB(0, 19.5, 0, 12),
              child: Text('¥ 2798', style: TextStyle(fontSize: 20.0, color: Colors.red),),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                const Text('购买数量:', style: TextStyle(fontSize: 15.0),),
                MyNumber(num: number, min: 0, max: 9, step: 1, numberChange:_numberChange)
              ],
            ),
            GestureDetector(
              onTap: _openModalBottomSheet,
              child: Container(
                margin: const EdgeInsets.only(top: 12),
                height: 60.0,
                decoration: const BoxDecoration(
                  border: Border(
                    top: BorderSide(width: 1.0, color: Color(0xffefefef)),
                    bottom: BorderSide(width: 1.0, color: Color(0xffefefef))
                  )
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: const [
                        Padding(
                          padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
                          child: Icon(Icons.check_circle_outline,size: 20,),
                        ),
                        Text('支持花呗分期',style: TextStyle(fontSize: 15.0),),
                        Padding(
                          padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
                          child: Icon(Icons.check_circle_outline,size: 20,),
                        ),
                        Text('支持以旧换新',style: TextStyle(fontSize: 15.0),),
                      ],
                    ),
                    const Icon(Icons.arrow_forward_ios_rounded,size: 20,)
                  ],
                ),
              ),
            ),
            Container( //自定义tabBar
              decoration: const BoxDecoration(
                border: Border(bottom: BorderSide(width: 1.0, color: Color(0xffefefef)))
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: tabsInfo.map((item){
                  return GestureDetector(
                    onTap: (){
                      int index = tabsInfo.indexOf(item);
                      if(index != -1) {
                        setState(() {
                          _currentIndex = index;
                        });
                      }
                    },
                    child: Container(
                      height: 45,
                      padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
                      decoration: BoxDecoration(
                        border: Border(bottom: BorderSide(width: 3.0, color: tabsInfo[_currentIndex]['name']==item['name']?const Color(0xffec000d):Colors.transparent))
                      ),
                      child: Center(
                        child: Text(item['name'], style: const TextStyle(fontSize: 14.0),),
                      ),
                    ),
                  );
                }).toList(),
              ),
            ),
            Image(image: AssetImage(tabsInfo[_currentIndex]['desc']))
          ],
        ),
      ),
      bottomNavigationBar: BottomAppBar(
        color: Colors.white,
        child: Container(
          height: 46.0,
          padding: const EdgeInsets.fromLTRB(6, 0, 16, 0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Padding(
                padding: const EdgeInsets.fromLTRB(10.0,0,10.0,0),
                child: GestureDetector(
                  onTap: (){
                    // Navigator.pushNamed(context, '/');
                    Navigator.of(context).pushAndRemoveUntil( //跳转后并取消返回
                      MaterialPageRoute(builder: (context) => const LayoutApp()), (route) => route == null);
                  },
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const Icon(Icons.home),
                      Transform(
                        transform: Matrix4.translationValues(0, -5, 0),
                        child: const Text('首页'),
                      ),
                    ],
                  ),
                ),
              ),
              Expanded(
                flex: 1,
                child: ElevatedButton(
                  onPressed: (){ Navigator.of(context).push(MaterialPageRoute(builder: (context)=> PayMent(item:goodInfo, count:number ,)));},
                  child: const Text('立即购买'),
                  style: ButtonStyle(
                    textStyle: MaterialStateProperty.all(const TextStyle(fontSize: 15, color: Color(0xffcccccc))),
                    backgroundColor: MaterialStateProperty.all(const Color(0xffdb1c2a)),
                    shape: MaterialStateProperty.all(const StadiumBorder(
                        side: BorderSide(
                          style: BorderStyle.solid,
                          color: Color(0xffFF7F24),
                        )
                      )
                    )
                  ),
                )
              )
            ],
          ),
        ),
      ),
    );
  }
}
